<template>
	<view class="container">
		<view class="header">
			<view class="topbox">
				<view class="left">
					<uni-icons class="rr-icons"  type="back" color="#fff" size="24"  @click="$goURl('/pages/index/index')"></uni-icons>
				</view>

			</view>
			<view class="title">
				已有{{data.total}}人砍价成功
			</view>
			<swiper class="list" style="height: 30px;" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000" v-if=" data.seiperlist.length!=0">
				<swiper-item  style="height: 30px;" v-for="(item,index) in data.seiperlist" :key="item.ID">
					<view class="items">
						<image :src="item.user.head||$defaultAvatar" mode=""></image>
						<view class="titles textsl1">
							用户 {{item.user.nickname?item.user.nickname[0]+'*':item.user.mobile[0]+"*"}} 砍价成功 | {{$toFiexd(item.price,2)}}元拿下了[{{setstr(item.goods.name)}}]
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
			<view class="content">
				<z-tabs ref="tabs" bar-width='0' bar-height='0' bg-color="#F4F6FA" :active-style="{'background-color':'#FA301B',color:'#fff',padding:'5upx 20upx','border-radius':'30upx'}" :current="data.current" @change="tabsChange"   :list="data.tablist"></z-tabs>
				<scroll-view class='scroll' :scroll-y="true" @scrolltolower="getGoods()">
					<view class="list">
						<view class="item" v-for="item in data.goodsList" :key="item.ID" @click="goURle('/pages/commodity/bargaining/bargainingdetails?id='+item.ID)">
							<image class='tlimg' src="http://pubuimg.cqguanjie.cn/icon/16995202068932.png" mode=""></image>
							<view class="image">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="goods">
								<view class="goodstitle textsl2">
									{{item.name}}
								</view>
								<view class="pricebox">
									<view class="price">
										<view class="price1">
											最低可砍至￥{{$toFiexd(item.price,2)}}
										</view>
										<view class="price2">
											原价{{$toFiexd(item.market,2)}}
										</view>
									</view>
									<view class="btns">
										去砍价
									</view>
								</view>
							</view>
						</view>
						<empty v-if="data.goodsList.length==0"></empty>
					</view>
				</scroll-view>
			</view>
			<view class="btn" @click="goURler('/pages/commodity/bargaining/mylist')">
			我的砍价
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const { appContext } = getCurrentInstance();
	const data = reactive({
		current:0,
		tablist:[{name:'全部',ID:0}],
		goodsList:[],
		page:0,
		pages:1,
		total:0,
		seiperlist:[]
	})
	onLoad((option)=>{
		secondary()
	})
	onShow(()=>{
		bargainingSuccessList()
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		getGoods()
	})
	function goURle(item){
		if(item.indexOf('/pages/')!=-1){
			uni.navigateTo({
				url:item
			})
		}else{
			uni.showToast({
				icon:'none',
				title:'暂未开放'
			})
		}
	}
	function goURler(item){
		uni.navigateTo({
			url:item
		})
	}
	function tabsChange(e){
		data.current=e
		data.goodsList=[]
		data.page=0
		data.pages=1
		getGoods()
	}
	function setstr(str){
		return str.slice(0,2)+'**'+str.slice(str.length-2,str.length)
	}
	function bargainingSuccessList(){
		
		appContext.config.globalProperties.$request({
			url:`api/bargaining/bargainingSuccessList/?page=1&size=10`,
			method:'GET',
			success:(res)=>{
				data.total=res.data.total
				data.seiperlist=res.data.data
			}
		})
	}
	// 商品分类
	function secondary(){
		appContext.config.globalProperties.$request({
			url:`api/typeList/`,
			method:'GET',
			success:(res)=>{
				if(res.errno==0){
					data.tablist=[{name:'全部',ID:0},...res.data.class_first]
					getGoods()
				}
			}
		})
	}
	function getGoods(){
		if(data.page<data.pages){
			data.page++
			appContext.config.globalProperties.$request({
				url: `api/bargaining/goods_list_all/${data.tablist[data.current].ID}/?page=${data.page}&size=10`,
				method: 'get',
				success(res) {
					res.data.data.forEach(item=>{
						data.goodsList.push(item)
					})
					data.pages = Math.ceil(res.data.total /10)
				}
			})
		}
	}
</script>

<style lang="scss">
	.container{
		// padding: 30upx 0;
		background-image: url('https://pili-vod.guanxikeji.com/houdejia/img/1710493669101.png');
		background-repeat: no-repeat;
		background-size: 100% 460upx;
		.header{
			width: 100%;
			height: 460upx;
			position: relative;
			.topbox{
				display: flex;
				justify-content: space-between;
				padding-top: 44px;
				.left{
					background: rgba(0,0,0,0.4);
					border-radius:0 50% 50% 0;
					padding: 15upx;
					padding-left: 35upx;
				}
				.right{
					background: rgba(0,0,0,0.4);
					border-radius: 50%;
					padding: 15upx;
					margin-right: 20upx;
				}
			}
			.title{
				text-align: center;
				width: 100%;
				position: absolute;
				top: 255upx;
				font-size: 12px;
				color: #7A2000;
			}
			.list{
				width: calc(100% - 100upx);
				position: absolute;
				bottom: 0;
				margin: 0 30upx;
				padding: 20upx;
				background-color: #FFEEEC;
				border-radius: 30upx 30upx 0 0 ;
				z-index: 1;
				.items{
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 22px;
						height: 22px;
						border-radius: 50%;
						border: 1px solid #FE2406;
					}
					.titles{
						width: calc(100% - 30px);
						font-size: 12px;
						color: #A12F03;
					}
				}
			}
		}
			.content{
				padding-top: 30upx;
		.scroll{
			height:calc(100vh - 600upx);
			background-color: #F4F6FA;
			border-radius: 30upx;
			z-index: 999;
			overflow: hidden;
				.list{
					padding: 0 30upx;
					max-height: 400px;
					overflow: auto;
					.item{
						background-color: #fff;
						padding: 15upx;
						border-radius: 15upx;
						display: flex;
						position: relative;
						margin-bottom: 20upx;
						.tlimg{
							position: absolute;
							left: 0;
							top: 30upx;
							width: 60px;
							height: 19px;
							z-index: 9999;
						}
						.image{
							border-radius: 15upx;
							margin-right: 20upx;
							image{
								width: 90px;
								height: 90px;
								border-radius: 15upx;
							}
						}
						.goods{
							width: calc(100% - 90px - 20upx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.goodstitle{
								font-size: 16px;
								font-weight: bold;
							}
							.pricebox{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.price{
									.price1{
										color: #FE2406;
										font-size: 13px;
									}
									.price2{
										color: #999;
										font-size: 12px;
										text-decoration: line-through;
									}
								}
								.btns{
									background: linear-gradient(to bottom,#FF521C,#FE2406);
									width: 30%;
									text-align: center;
									padding: 10upx 0;
									border-radius: 30upx;
									color: #fff;
									font-size: 13px;
								}
							}
						}
					}
				}
			}
		}
		.btn{
			background: linear-gradient(to bottom,#FF521C,#FE2406);
			text-align: center;
			width: 90%;
			margin-left: 5%;
			padding: 20upx 0;
			border-radius: 30upx;
			color: #fff;
			font-size: 13px;
			position: fixed;
			bottom: 60px;
		}
	}
</style>
